<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>评论列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索筛选 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-input size="small" v-model="commodityName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="status" placeholder="请选择评论状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="OpenAdd()">添加</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" :data="feedData" element-loading-text="拼命加载中">
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="commodityName" label="商品名称" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="userName" label="用户名称" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="comments" label="评论" width="200"></el-table-column>
            <el-table-column align="center" sortable prop="status" :formatter="Status" label="评论状态"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="url" label="评论图片" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.url">
                        <el-image v-for="(image, index) in scope.row.url.split(',')" :key="index" :src="image"
                            style="margin-right: 5px; width: 80px;" :preview-src-list="[image]"></el-image>
                    </div>
                    <div v-else>没有图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="urls" label="评论视频" width="150">
                <template slot-scope="scope">
                    <video :src="scope.row.urls" style="width: 60px;" v-if="scope.row.urls" controls>
                        Your browser does not support the video tag.
                    </video>
                    <div v-if="scope.row.urls == null">没有视频</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="star" label="评论星数" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="replyStatus" :formatter="ReplyStatus" label="商家回复状态"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="reply" label="商家回复内容" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.replyStatus == 1">{{ scope.row.reply }}</div>
                    <div v-else>待回复</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="replyTime" label="回复时间" width="160">
                <template slot-scope="scope">
                    <div v-if="scope.row.replyStatus == 1">{{ transformDate(scope.row.replyTime) }}</div>
                    <div v-else>待回复</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="160">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="200px">
                <template slot-scope="scope">
                    <el-button size="mini" v-if="scope.row.replyStatus == 1" type="info" disabled>回复</el-button>
                    <el-button size="mini" type="primary" v-else @click="upFeed(scope.row.id)">回复</el-button>
                    <el-button size="mini" type="danger" @click="deleData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑界面 -->
        <el-dialog title="添加" :visible.sync="editFormVisiible" width="60%">
            <el-form label-width="90px">
                <el-form-item label="商品名">
                    <el-select v-model="tianjia.commodityId" placeholder="请选择商品名" size="small">
                        <el-option v-for="item in optionsCom" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="用户名">
                    <el-select v-model="tianjia.userId" placeholder="请选择用户名" size="small">
                        <el-option v-for="item in optionsUser" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-select v-model="tianjia.orderId" placeholder="请选择订单编号" size="small">
                        <el-option v-for="item in optionsOrder" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="评论">
                    <el-input size="small" v-model="tianjia.comments" auto-complete="off"
                        placeholder="请输入评论"></el-input>
                </el-form-item>
                <el-form-item label="评论状态">
                    <el-select v-model="tianjia.status" placeholder="请选择评论状态" size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评论图片">
                    <div style="display: flex;">
                        <el-upload action="" :http-request="mainImgUpload" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <ul style="" class="urlLun">
                            <li v-for="(url, index) in urlArr" :key="url"
                                style="width: 140px;height: 140px;margin:3px 0 3px 14px;  position:relative">
                                <el-image v-if="url != ''" :src="url" :preview-src-list="[url]"
                                    style="width: 140px;height: 140px;"></el-image>
                                <el-button class="deleUrl" type="danger" icon="el-icon-delete" circle
                                    @click="DeleUrl(index)"></el-button>
                            </li>
                        </ul>
                    </div>
                </el-form-item>
                <el-form-item label="评论视频" prop="url">
                    <div style="display: flex; align-items: center;">
                        <el-upload action="" :http-request="mainVideoUpload" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <video :src="tianjia.urls" style="width: 80px;margin-left: 14px;" v-if="tianjia.urls" controls>
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </el-form-item>
                <el-form-item label="评论星数">
                    <el-input size="small" v-model="tianjia.star" auto-complete="off" placeholder="请输入评论星数"></el-input>
                </el-form-item>

                <!-- <el-form-item label="商家回复状态">
                    <el-select v-model="tianjia.replyStatus" placeholder="请选择商家回复状态">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="商家回复内容" v-if="tianjia.replyStatus == 1">
                    <el-input size="small" v-model="tianjia.reply" auto-complete="off"
                        placeholder="请输入商家回复内容"></el-input>
                </el-form-item>

                <el-form-item label="商家回复时间" v-if="tianjia.replyStatus == 1">
                    <el-date-picker v-model="tianjia.replyTime" size="small" type="datetime" placeholder="请选择回复时间"
                        align="right" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addData()">添加</el-button>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    </div>
</template>

<script>
import {
    getAdminCommodityReplyList,
    returnReply,
    addCommodityReply,
    deleteAdminCommodityReply,
    getCommodityList,
    getUserList,
    getShopOrderList
} from '../../api/userMG';
import client from "@/utils/ossClient.js";
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            commodityName: '',
            status: '',
            // 用户数据
            feedData: [],
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
            loading: false,
            options: [{
                value: 0,
                label: '好评'
            }, {
                value: 1,
                label: '中评'
            }, {
                value: 2,
                label: '差评'
            }],
            options1: [{
                value: 0,
                label: '待回复'
            }, {
                value: 1,
                label: '已回复'
            }],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            editFormVisiible: false,
            tianjia: {
                commodityId: '',
                userId: '',
                orderId: '',
                comments: '',
                status: '',
                url: '',
                urls: '',
                star: '',
                replyStatus: '',
                reply: '',
                replyTime: '',
                createTime: ''
            },
            optionsCom: [],
            optionsUser: [],
            optionsOrder: [],
            urlArr: []
        }

    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getdata(1);
        this.getShuju();
    },
    methods: {
        // 添加
        addData() {
            this.loading = true
            this.tianjia.url = this.urlArr
            addCommodityReply(this.tianjia).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getdata(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 打开编辑器
        OpenAdd() {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiible = true
                    this.tianjia.commodityId = ''
                    this.tianjia.userId = ''
                    this.tianjia.orderId = ''
                    this.tianjia.comments = ''
                    this.tianjia.status = ''
                    this.tianjia.url = ''
                    this.urlArr = []
                    this.tianjia.urls = ''
                    this.tianjia.star = ''
                    this.tianjia.replyStatus = ''
                    this.tianjia.reply = ''
                    this.tianjia.replyTime = ''
                    this.tianjia.createTime = ''
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        getShuju() {
            getCommodityList().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.list.forEach((item) => {
                        this.optionsCom.push({ label: item.name, value: item.id })
                    })
                    return;
                }
            })
            getUserList().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.list.forEach((item) => {
                        this.optionsUser.push({ label: item.nickName, value: item.id })
                    })
                    return;
                }
            })
            getShopOrderList().then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    res.data.list.forEach((item) => {
                        this.optionsOrder.push({ label: item.orderNumber, value: item.id })
                    })
                    return;
                } else {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    })
                }
            })
        },
        // 自定义上传方法 视频的
        mainVideoUpload(file) {
            // 判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["video", "mp4"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        this.tianjia.urls = res.url
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 删除图片
        DeleUrl(index) {
            this.urlArr
            this.urlArr.splice(index, 1);
        },
        // 自定义上传方法 评论的
        mainImgUpload(file) {
            // 判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        this.urlArr.push(res.url)
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 删除
        deleData(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm('确定删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let data = {
                            id: row.id
                        }
                        deleteAdminCommodityReply(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getdata(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 回复状态
        ReplyStatus: function (row) {
            if (row.replyStatus == 0) {
                return "待回复"
            } else if (row.replyStatus == 1) {
                return "已回复"
            }
        },
        // 状态
        Status: function (row) {
            if (row.status == 0) {
                return "好评"
            } else if (row.status == 1) {
                return "中评"
            } else if (row.status == 2) {
                return "差评"
            }
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        // 回复
        upFeed(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$prompt('请输入回复内容', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^(?!(\s+$))/,
                        inputErrorMessage: '不可以空数据提交!'
                    }).then(({ value }) => {
                        let data = {
                            id: row,
                            reply: value
                        }
                        returnReply(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getdata(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },

        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.commodityName = ''
            this.status = ''
            this.getdata(1)
        },

        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                commodityName: this.commodityName,
                status: this.status,
            };
            getAdminCommodityReplyList(parameter).then((res) => {
                console.log('res.data', res)
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.feedData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })

        }
    }
}
</script>

<style>
li {
    list-style: none;
}

.urlLun {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    width: 100%;
    height: 160px;
    padding: 0;
    margin: 0;
}

.deleUrl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.urlLun li:hover .deleUrl {
    display: block;
}
</style>